import React from 'react';
import {Text,View,TextInput,TouchableOpacity,ImageBackground,Image,StyleSheet} from 'react-native'; 
import { AntDesign } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { useState,useEffect } from 'react';
import '../global'

const styles = StyleSheet.create({
    boxPhone:{
        display:'flex',
        flexDirection:'row',
        marginTop:pxtodpH(70),
        marginLeft:pxtodpW(120)
    }
})

//这是用户登录页
export const UserLogin = ({navigation}) => {
    const [userName,setUserName] = useState('');
    const [password,setPassword] = useState('');
    const [userInformation,setUserInformation] = useState(['','']);
    const [tipMessage2,setTipMessage2] = useState(['','']);
    const changeUserName = (e) => {
        setUserName(e)
    }
    const changePassword = (e) => {
        setPassword(e)
    }
    const onEndUserName = () => {
        setUserName(userName);
    }
    const onEndPassWord = () => {
        setPassword(password);
    }
    useEffect(() => {
        fetch('http://82.157.94.91:8000/users/login',{
            method:'post',
            body:JSON.stringify({user_name:userInformation[0],password:userInformation[1]}),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res=>res.json()).then(res=>{
            if(res.code == 0){
                setTipMessage2(["","green"]);
                token = res.result.token;
                user_info=res.result.user_info;
                console.log(token);
                userMessage = res.result.user_info;

            }else if(res.code == '10004'){
                setTipMessage2(["用户不存在","red"]);
            }else if(res.code == '10006'){
                setTipMessage2(["密码错误","red"])
            }
        })
    },[userInformation])
    return (
        <View style={{
            backgroundColor:'white',
            height:h
        }}>
            <ImageBackground
                source={require('../images/1bgtel1.jpeg')}
                style={{
                    height:h
                }}
            >
                <View style={{
                    width:0.7*w,
                    height:0.5*h,
                    borderColor:"#e9e7ef",
                    borderWidth:8,
                    marginLeft:0.15*w,
                    marginTop:0.2*h,
                    paddingTop:pxtodpH(50),
                    borderRadius:40,
                    backgroundColor:'rgba(255,255,255,0.5)'
                }}>
                    <Text style={{
                        fontSize:35,
                        fontWeight:'bold',
                        color:'black',
                        marginBottom:pxtodpH(20),
                        textAlign:'center',
                        marginRight:pxtodpW(20)
                    }}>个人用户登录</Text>
                    <View style={styles.boxPhone}>
                        <AntDesign name="user" size={26} color="grey" />
                        <TextInput
                            placeholder='请输入用户名'
                            textContentType='username'
                            onChangeText={changeUserName}
                            onEndEditing={onEndUserName}
                            value={userName}
                            style={{
                                fontSize:25
                            }}
                        />
                    </View>
                    <View style={styles.boxPhone}>
                        <Entypo name="key" size={26} color="grey" />
                        <TextInput
                            placeholder='请输入密码'
                            textContentType='password'
                            onChangeText={changePassword}
                            onEndEditing={onEndPassWord}
                            value={password}
                            style={{
                                fontSize:25
                            }}
                        />
                    </View>
                    <TouchableOpacity
                    style={{
                        marginLeft:pxtodpW(250),
                        marginTop:pxtodpH(30)
                    }}
                    onPress={()=>{
                        if(tipMessage2[1]=='green'){
                            setUserName('');
                            setPassword('');
                            setTipMessage2(['','']);
                        }
                    }}>
                        <Text style={{
                            color:tipMessage2[1]
                        }}>{tipMessage2[0]}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity 
                    style={{
                        width:pxtodpW(150),
                        height:pxtodpH(80),
                        borderWidth:6,
                        borderColor:'#e9f1f6',
                        borderRadius:50,
                        paddingLeft:pxtodpW(25),
                        marginLeft:pxtodpW(170),
                        marginTop:pxtodpH(50),
                        backgroundColor:'white'
                    }}
                    onPress={()=>{
                        setUserInformation([userName,password]);
                        if(tipMessage2[1]=='green'){
                            navigation.navigate('Root');
                        }
                    }}
                    ><Text style={{
                        fontSize:30,
                        color:'grey'
                    }}>确定</Text></TouchableOpacity>
                </View>
                <View style={{
                    display:'flex',
                    flexDirection:'row'
                }}>
                    <TouchableOpacity 
                            onPress={()=>{
                                navigation.navigate('TelLogin')
                            }}
                            style={{
                                marginTop:pxtodpH(40),
                                marginLeft:pxtodpW(170)
                            }}
                        >
                            <Text style={{
                                color:'#75878a',
                                fontSize:20
                            }}>注册用户</Text>
                    </TouchableOpacity>
                    <TouchableOpacity 
                            style={{
                                marginTop:pxtodpH(40),
                                marginLeft:pxtodpW(170)
                            }}
                        >
                            <Text style={{
                                fontSize:20,
                                color:'#75878a',
                            }}>忘记密码</Text>
                    </TouchableOpacity>
                </View>
            </ImageBackground>
        </View>
    )
}

//这是用户注册页
const TelLogin = ({navigation}) => {
    const [userName,setUserName] = useState('');
    const [password,setPassword] = useState('');
    const [userInformation,setUserInformation] = useState(['','']);
    const [tipMessage,setTipMessage] = useState(['','']);
    const changeUserName = (e) => {
        setUserName(e)
    }
    const changePassword = (e) => {
        setPassword(e)
    }
    const onEndUserName = () => {
        setUserName(userName);
    }
    const onEndPassWord = () => {
        setPassword(password);
    }
    useEffect(() => {
        fetch('http://82.157.94.91:8000/users/register',{
            method:'post',
            body:JSON.stringify({user_name:userInformation[0],password:userInformation[1]}),
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(res=>res.json())
        .then(res=>{
            console.log(res.code)
            if(res.code==0){
                setTipMessage(['','green']);
            }else if(res.code == '10002'){
                setTipMessage(['该用户名已经被注册，请更换用户名','red']);
            }
        })
    },[userInformation])
    return (
    <View>
        <ImageBackground 
        source={require("../images/1bgtel1.jpeg")}
        style={{
            width:w,
            height:h
        }}>
            <TouchableOpacity
            onPress={()=>{
                navigation.navigate('UserLogin');
            }}
            style={{
                marginTop:0.15*h,
                marginLeft:pxtodpW(20)
            }}>
                <AntDesign name="arrowleft" size={35} color="#88ada6" />
            </TouchableOpacity>
            <View style={{
                width:0.7*w,
                height:0.5*h,
                backgroundColor:'rgba(255,255,255,0.5)',
                marginLeft:0.15*w,
                borderRadius:40,
                borderColor:'#e9e7ef',
                borderWidth:6
            }}>
                <Text style={{
                    fontSize:35,
                    fontWeight:'bold',
                    color:'black',
                    textAlign:'center',
                    marginTop:pxtodpH(40),
                    marginBottom:pxtodpH(30)
                }}>个人用户注册</Text>
                <View style={styles.boxPhone}>
                    <AntDesign name="user" size={26} color="grey" />
                    <TextInput
                        placeholder='请输入用户名'
                        textContentType='username'
                        onChangeText={changeUserName}
                        onEndEditing={onEndUserName}
                        value={userName}
                        style={{
                            fontSize:25
                        }}
                    />
                </View>
                <View style={styles.boxPhone}>
                    <Entypo name="key" size={26} color="grey" />
                    <TextInput
                        placeholder='请输入密码'
                        textContentType='password'
                        onChangeText={changePassword}
                        onEndEditing={onEndPassWord}
                        value={password}
                        style={{
                            fontSize:25
                        }}
                    />
                </View>
                <TouchableOpacity
                style={{
                    marginLeft:pxtodpW(60),
                    marginTop:pxtodpH(40)
                }}
                onPress={()=>{
                    if(tipMessage[1]=='green'){
                        navigation.navigate('UserLogin');
                        setUserName('');
                        setPassword('');
                        setTipMessage(['','']);
                    }
                }}>
                    <Text style={{
                        color:tipMessage[1],
                        fontSize:16
                    }}>{tipMessage[0]}</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={{
                        width:pxtodpW(150),
                        height:pxtodpH(80),
                        borderWidth:5,
                        borderColor:'#e9e7ef',
                        borderRadius:30,
                        paddingLeft:pxtodpW(25),
                        marginLeft:pxtodpW(180),
                        marginTop:pxtodpH(60),
                        backgroundColor:'white'
                    }}
                    onPress={()=>{
                        setUserInformation([userName,password]);
                        if(tipMessage[1]=='green'){
                            navigation.navigate('UserLogin')
                        }
                    }}
                >
                    <Text style={{
                        fontSize:30,
                        color:'grey'
                    }}>确定</Text>
                </TouchableOpacity>
                
            </View>
        </ImageBackground>
    </View>
  )
}

export default TelLogin